﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户管理</title>
    <link rel="stylesheet" href="../../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../../assets/module/admin.css?v=317"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- 页面加载loading -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div>
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">账&emsp;号:</label>
                        <div class="layui-input-inline">
                            <input name="account" class="layui-input" placeholder="输入工号"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用户名:</label>
                        <div class="layui-input-inline">
                            <input name="name" class="layui-input" placeholder="输入用户名"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">入职时间:</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="crtDate" id="test1">
                        </div>
                    </div>
                    <div class="layui-inline">&emsp;
                        <button class="layui-btn icon-btn" lay-filter="userTbSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="userTable" lay-filter="userTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="userTbBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="list">入职清单</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete">删除</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">标记</a>
</script>
<!-- 表格状态列 -->
<script type="text/html" id="userTbState">
    <input type="checkbox" lay-filter="userTbStateCk" value="{{d.userId}}" lay-skin="switch"
           lay-text="正常|锁定" {{d.state==0?'checked':''}} style="display: none;"/>
    <p style="display: none;">{{d.state==0?'正常':'锁定'}}</p>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="userEditDialog">
    <form id="userEditForm" lay-filter="userEditForm" class="layui-form model-form">
        <input name="userId" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">员工姓名:</label>
            <div class="layui-input-block">
                <input name="name" placeholder="请输入用户名" class="layui-input"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">工号:</label>
            <div class="layui-input-block">
                <input name="account" id="account_name" placeholder="请输入工号" class="layui-input"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">部门:</label>
            <div class="layui-input-block">
                <input id="cascader" value="90,192" name="orgId" value=""/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色:</label>
            <div class="layui-input-block">
                <div id="userEditRoleSel"></div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <a class="layui-btn" lay-filter="userEditSubmit" lay-submit>保存</a>
            <a class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</a>
        </div>
    </form>
</script>
<script type="text/html" id="userAddDialog">
    <form id="userAddForm" lay-filter="userAddForm" class="layui-form model-form">
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">员工姓名:</label>
            <div class="layui-input-block">
                <input name="name" placeholder="员工姓名" class="layui-input"
                       lay-verType="tips" lay-verify="required|username"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">身份证号:</label>
            <div class="layui-input-block">
                <input name="idNum" placeholder="身份证号" class="layui-input"
                       lay-verType="tips" lay-verify="required|identity"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">手机号:</label>
            <div class="layui-input-block">
                <input name="phone" placeholder="手机号" class="layui-input"
                       lay-verType="tips" lay-verify="required|phone"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">居住地:</label>
            <div class="layui-input-block">
                <input name="livePlace" placeholder="居住地" class="layui-input"
                       lay-verType="tips" lay-verify="required"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">出生年月:</label>
            <div class="layui-input-block">
                <input name="birthTime" placeholder="出生年月" autocomplete="off" class="layui-input" id="birthTime"
                       lay-verType="tips" lay-verify="required" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">性别:</label>
            <div class="layui-input-block">
                <select name="sex" class="layui-select">
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item text-right">
            <a class="layui-btn" lay-filter="userAddSubmit" lay-submit>保存</a>
            <a class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</a>
        </div>
    </form>
</script>
<script type="text/html" id="listDialog">
    <table id="listTable" lay-filter="userTable"></table>
</script>
<!-- js部分 -->
<script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../../assets/js/common.js?v=317"></script>
<script type="text/javascript" src="../../../assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/js.cookie.min.js"></script>
<script type="text/javascript" src="../../../assets/js/sqjx.js"></script>
<script>
    let currentOrg;
    layui.use(['upload', 'form', 'table', 'util', 'admin', 'tree', 'xmSelect', 'treeTable', 'cascader', 'laydate'], function () {
        var treeData, insXmSel;
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var xmSelect = layui.xmSelect;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var cascader = layui.cascader;
        /* 渲染表格 */
        var insTb = table.render({
            elem: '#userTable',
            url: '/office/hrEmployDetail/queryHrEmployDetailList?status=1',
            page: true,
            method: 'post',
            request: {
                pageName: 'page',
                limitName: 'rows',
            },
            toolbar: ['<p>',
                '<button lay-event="addUser" class="layui-btn layui-btn-sm icon-btn">员工登记</button>&nbsp;',
                '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn">批量生成工号</button>&nbsp;',
                '<button lay-event="crt" class="layui-btn layui-btn-sm icon-btn">添加成员</button>&nbsp;',
                '<button lay-event="import" class="layui-btn layui-btn-sm" id="test2"><i class="layui-icon">&#xe67c;</i>导入用户</button>&nbsp;',
                '</p>'].join(''),
            cellMinWidth: 100,
            height: $(window).height() - 100,
            cols: [[
                {type: 'numbers'},
                {type: 'checkbox'},
                {field: 'name', title: '姓名'},
                {field: 'account', title: '工号'},
                {field: 'orgName', title: '部门'},
                // {
                //     field: 'sex', title: '性别', templet(row) {
                //         return row.sex == 1 ? '男' : (row.sex == 2 ? '女' : '未定义')
                //     }
                // },
                // {field: 'birthTime', title: '生日月份'},
                // {
                //     field: 'political', title: '政治面貌', templet(row) {
                //         return row.political == 1 ? '群众' : '党员'
                //     }
                // },
                // {field: 'homeTown', title: '籍贯'},
                // {
                //     field: 'edu', title: '学历', templet(row) {
                //         // return doPostSync('/tDict/getDictValue', {dictCode: 'edu'})||'未填写';
                //     }
                // },
                // {field: 'health', title: '健康状况'},
                // {field: 'sick', title: '重大疾病史'},
                // {
                //     field: 'single', title: '婚姻状况', templet(row) {
                //         return row.single == 1 ? '未婚' : '已婚'
                //     }
                // },
                // {field: 'phone', title: '手机号'},
                // {field: 'warnPerson', title: '紧急联系人'},
                // {field: 'warnPhone', title: '联系人电话'},
                // {field: 'idNum', title: '身份证'},
                // {field: 'livePlace', title: '居住地址'},
                // {field: 'idPlace', title: '身份证地址'},
                // {field: 'relation', title: '社会关系'},
                // {field: 'school', title: '教育经历'},
                // {field: 'company', title: '工作经历'},
                {title: '操作', toolbar: '#userTbBar', align: 'center', minWidth: 200, fixed: 'right'}
            ]],
            parseData: function (res) {
                return {
                    "code": 0,
                    "msg": "",
                    "count": res.obj.total,
                    "data": res.obj.rows
                }
            }
        });
        laydate.render({
            elem: '#test1' //指定元素
        });
        //执行实例
        var uploadInst = upload.render({
            elem: '#test2' //绑定元素
            , url: '/office/import/user?token=' + Cookies.get('token') //上传接口
            , accept: 'file'
            , done: function (res) {
                //上传完毕回调
            }
            , error: function () {
                //请求异常回调
            }
        });
        /* 表格搜索 */
        form.on('submit(userTbSearch)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });

        /* 表格工具条点击事件 */
        table.on('tool(userTable)', function (obj) {
            if (obj.event === 'edit') { // 修改
                showEditModel(obj.data);
            } else if (obj.event === 'del') { // 标记
                doDel(obj);
            } else if (obj.event === 'delete') {
                doDelete(obj)
            } else if (obj.event === 'list') {
                showList(obj)
            }
        });
        /* 表格头工具栏点击事件 */
        table.on('toolbar(userTable)', function (obj) {
            if (obj.event === 'add') { // 添加
                createAccount()
            } else if (obj.event == 'crt') {
                showEditModel(obj.data)
            } else if (obj.event === 'import') {
                uploadInst.reload();
            } else if (obj.event === 'addUser') {
                showAddUserModel();
            }
        });

        function showAddUserModel() {
            admin.open({
                type: 1,
                title: '员工登记',
                area: ['60%', '80%'],
                page: false,
                content: $('#userAddDialog').html(),
                success: function () {
                    laydate.render({
                        elem: '#birthTime', //指定元素
                        trigger:'click'
                    });
                    form.render('select');
                    form.on('submit(userAddSubmit)', function (obj) {
                        let param = obj.field;
                        $.post("/office/syncInfo/syncUserBaseInfo", param, function (res) {
                            if (res.code == 200) {
                                closeDialog();
                                showAlert('添加成功',1);
                            }
                        })
                    })
                }
            })

        }

        function showList(obj) {
            admin.open({
                type: 1,
                title: '入职清单',
                area: ['80%', '60%'],
                page: false,
                content: $('#listDialog').html(),
                success: function () {
                    table.render({
                        elem: '#listTable',
                        url: '/office/hrUserList/queryHrUserListList?underSignAccount=' + obj.data.account,
                        page: false,
                        method: 'get',
                        request: {
                            pageName: 'page',
                            limitName: 'rows',
                        },
                        cellMinWidth: 100,
                        limit: 50,
                        height: $(window).height() - 100,
                        cols: [[
                            {type: 'numbers'},
                            {field: 'type', title: '项目'},
                            {field: 'signName', title: '签字'},
                            {field: 'signTime', title: '签字时间'},
                        ]],
                        parseData: function (res) {
                            return {
                                "code": 0,
                                "msg": "",
                                "count": res.obj.total,
                                "data": res.obj.rows
                            }
                        }
                    });

                }
            })
        }

        function doDelete(obj) {
            if (obj.data.account) {
                showAlert('有工号的员工无法删除，可点击标记设置！！！');
            } else {
                layer.confirm('是否删除该条记录', function () {
                    $.post('/office/hrEmployDetail/deleteRecord', {detailId: obj.data.detailId}, function (res) {
                        closeDialog();
                        if (res.code == 200) {
                            insTb.reload({where: obj.data.field, page: {curr: 1}});
                            showMsg(res.msg);
                        } else {
                            showAlert(res.msg);
                        }
                    })
                })
            }

        }

        /* 显示表单弹窗 */
        function showEditModel(row) {
            admin.open({
                type: 1,
                title: (row ? '修改' : '添加') + '用户',
                content: $('#userEditDialog').html(),
                area: ['60%', '80%'],
                success: function (layero, dIndex) {
                    let insRoleSel;
                    $.get('/office/role/listAll', {}, function (res) {
                        if (!row) {
                            insRoleSel = xmSelect.render({
                                el: '#userEditRoleSel',
                                name: 'userEditRoleSel',
                                data: res.obj,
                                initValue: ''
                            });
                        } else {
                            $.post('/office/user/queryUserRoles', {account: row.account}, function (response) {
                                //渲染用户角色
                                $("#account_name").attr('readonly', true)
                                insRoleSel = xmSelect.render({
                                    el: '#userEditRoleSel',
                                    name: 'userEditRoleSel',
                                    data: res.obj,
                                    initValue: response.obj
                                });

                            })
                        }
                    })
                    $.post('/office/org/getOrgTree', function (res) {
                        for (var i = 0; i < res.obj.length; i++) {
                            res.obj[i].title = res.obj[i].organizationName;
                            res.obj[i].label = res.obj[i].organizationName;
                            res.obj[i].value = res.obj[i].id;
                        }
                        var orgId = row ? row.orgId ? row.orgId : '' : '';
                        var fullPath = new String(orgId);
                        getPid(orgId);

                        function getPid(orgId) {
                            if (orgId) {
                                let temp = res.obj.find(item => {
                                    return item.id == orgId
                                });
                                fullPath = temp.parentOrgId + ',' + fullPath;
                                getPid(temp.parentOrgId);
                            }

                        }

                        fullPath = fullPath.substring(2, fullPath.length)
                        $("#cascader").val(fullPath);
                        treeData = layui.treeTable.pidToChildren(res.obj, 'id', 'parentOrgId');
                        cascader.render({
                            elem: '#cascader',
                            data: treeData,
                            changeOnSelect: true,
                            filterable: true,
                            onChange: function (values, data) {
                            }
                        });
                        form.render();

                    });
                    // 回显表单数据
                    form.val('userEditForm', row);
                    // 表单提交事件
                    form.on('submit(userEditSubmit)', function (data) {
                        var loadIndex = layer.load(2);
                        if (currentOrg) {
                            data.field.orgId = currentOrg.id;
                        }
                        data.field.roles = insRoleSel.getValue('valueStr');
                        data.field.orgId = data.field.orgId.split(',').pop();
                        if (row) {
                            data.field.detailId = row.detailId;
                        }
                        $.post(row ? '/office/hrEmployDetail/updateHrEmployDetail' : '/office/user/addUserInfo', data.field, function (res) {
                            layer.close(loadIndex);
                            layer.close(dIndex);
                            if (res.code === 200) {
                                layer.msg(res.msg, {icon: 1});
                                insTb.reload({page: {curr: 1}});
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        })
                        return false;
                    });
                    // 弹窗不出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                }
            });
        }

        /* 删除 */
        function doDel(obj) {
            layer.confirm('确定将员工标记为离职吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                $.post('/office/user/leave', {account: obj.data.account}, function (res) {
                    layer.close(loadIndex);
                    if (res.code === 200) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload({page: {curr: 1}});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                })
            });
        }

        /* 生成工号*/
        function createAccount() {
            var checkRows = table.checkStatus('userTable');
            if (checkRows.data.length == 0) {
                showAlert("请先选择人工后操作");
                return false
            }
            layer.confirm('确定生成工号?', function () {
                var ids = "";
                checkRows.data.forEach(item => {
                    if (!item.account) {
                        ids += "," + item.detailId;
                    }
                });
                ids = ids.substring(1);
                if (!ids) {
                    showAlert("请选择未设置工号员工！");
                    return false;
                }
                $.post('/office/user/createAccount', {detailIds: ids}, function (res) {
                    if (res.code == 200) {
                        closeDialog();
                        layer.msg(res.msg);
                    } else {
                        showAlert(res.msg);
                    }
                }, 'json')
            })
        }
    });
</script>
</body>
</html>
